import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { List, Card, Row, Col, Button, Modal, Form, Input, Checkbox, message,Badge } from 'antd';
import IconFont from '@/components/Iconfont';
import { PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { connect } from 'umi';

const { confirm } = Modal;

const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 17 },
};
interface ChanelModel {
    payChanelName: string,
    payChanelMemo: string,
    icon: string,
    isEnable: boolean
}
class ChanelSetting extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            loadingSave: false,
            visible: false,
            disabled: true,
            dataSource: [],
            record: {},
        };
    }
    formRef = React.createRef<any>();
    componentDidMount() {
        this.fetchData();
    }
    fetchData = () => {
        this.setState({ loading: true });
        this.props.dispatch({
            type: 'Abp/getAll',
            payload: { SkipCount: 0, MaxResultCount: 100 },
            control: 'PayChanels',
        }).then(() => {
            var resp = this.props.response.result?.items;
            this.setState({
                dataSource: resp,
                loading: false,
            });
        });
    };
    openModal = (record: any) => {
        this.setState({ visible: true, disabled: true, record });
        setTimeout(() => {
            if (record) {
                this.formRef.current.setFieldsValue({ model: record });
            }
            this.setState({ disabled: false });
        }, 1000);
    }
    closeModal = () => {
        this.setState({ visible: false });
    }
    onFinish = (values: any) => {
        const model = values.model;
        this.setState({ loadingSave: true });
        var act = "Abp/update";
        if (values.model.id == 0 || !values.model.id) {
            act = "Abp/create";
        }
        this.props.dispatch({
            type: act,
            payload: model,
            control: 'PayChanels',
        }).then(() => {
            var resp = this.props.response;
            if (resp.success) {
                message.success('保存成功！');
                this.fetchData();

                let _this = this;
                confirm({
                    icon: <ExclamationCircleOutlined />,
                    content: "继续添加 or 关闭窗口？",
                    okText: "继续",
                    onOk() {
                        console.log('ok');
                    },
                    onCancel() {
                        _this.closeModal();
                    },
                });
            }
            else {
                message.error('保存错误，请联系管理员！');
            }
            this.setState({ loadingSave: false });
        });
    }
    render() {
        return (
            <PageHeaderWrapper>
                <Row gutter={[16, 16]}>
                    <Col span={24}>
                        <Card>
                            <List
                                grid={{ gutter: 16, column: 4 }}
                                dataSource={this.state.dataSource}
                                split={true}
                                loading={this.state.loading}
                                renderItem={(item: ChanelModel) => (
                                    <List.Item>
                                        <List.Item.Meta
                                            avatar={<IconFont style={{ fontSize: 36 }} type={item.icon as string} />}
                                            title={<a onClick={() => this.openModal(item)}><Badge status={item.isEnable?'processing':'error'} text={item.payChanelName} /></a>}
                                            description={item.payChanelMemo}
                                        />
                                    </List.Item>
                                )}
                            />
                            <Button type="dashed" block icon={<PlusOutlined />} onClick={this.openModal} >添加渠道</Button>
                        </Card>
                    </Col>
                </Row>
                <Modal
                    title="渠道设置"
                    visible={this.state.visible}
                    destroyOnClose={true}
                    onCancel={this.closeModal}
                    footer={false}
                >
                    <Form {...layout} ref={this.formRef} onFinish={this.onFinish} >
                        <Form.Item
                            name={['model', 'payChanelIndex']}
                            label="渠道索引号"
                            rules={[{ required: true, message: "请输入渠道索引号" }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name={['model', 'payChanelName']}
                            label="渠道名称"
                            rules={[{ required: true, message: "请输入渠道名称" }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item
                            name={['model', 'payChanelMemo']}
                            label="描述/简介"
                            rules={[{ required: true, message: "请输入描述/简介" }]}>
                            <Input.TextArea />
                        </Form.Item>
                        <Form.Item
                            name={['model', 'icon']}
                            label="图标"
                            rules={[{ required: true, message: "请输入图标" }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item name={['model', 'isEnable']} label="启用" valuePropName="checked">
                            <Checkbox></Checkbox>
                        </Form.Item>
                        <Form.Item name={['model', 'id']} style={{ display: 'none' }}>
                            <Input />
                        </Form.Item>
                        <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 6 }}>
                            <Button type="primary" htmlType="submit" loading={this.state.loading} disabled={this.state.disabled}>保存</Button>
                        </Form.Item>
                    </Form>
                </Modal>
            </PageHeaderWrapper>
        )
    }
}

export default connect(({ Abp, Department }: API.IConnectState) => ({
    response: Abp.response,
}))(ChanelSetting);